[#ftl]
[@bootstrapChains "Step2/3 Initializing Style"]
[@requireStyle]
.agileClearButton{float:right;top:12px;background-image: url('${webAppHost}${context}/${project}/image/remove.png');display:inline;border:0px;width:12px;height:12px; background-repeat: no-repeat;}		
[/@]
agile.singoton("agile.XStyleMetadata",agile.Metadata,{
	 isSimple:false,metadataCategory:"style"
	 ,onValueChange:function(widget,name,value){}
	,onStartup:function(){}
});

agile.singoton("agile.BorderMetadata",agile.XStyleMetadata,{
	editorClass:"agile.BorderMetadata"
	,label:agile.i18n('Border',null,true)
	,name:"style.border"	
   [#assign templateString]
	<table cellspacing="1px">
		<tr>	
			<td>
				<div data-dojo-type='agile.BorderEditor' class="xeditor" ></div>
			</td>					
		</tr>	
		<tr>				
			<td>
				<div data-dojo-type='agile.RadiusEditor' class="xeditor" ></div>
			</td>					
		</tr>
		<tr>			
			<td valign="top"><div data-dojo-type='agile.BoxShadowEditor' class="xeditor"></div></td>
		</tr>
	</table>
	[/#assign]
   ,templateString:"${templateString?js_string}"
});	

agile.singoton("agile.TransformMetadata",agile.XStyleMetadata,{
	editorClass:"agile.TransformEditor"
	,label:agile.i18n('Transform',null,true)
	,name:"style.transform"			
   [#assign templateString]
	<table cellspacing="1px">	 
		<tr>
			<td><div data-dojo-type="agile.TransitionEditor" class="xeditor"></div></td>
		</tr> 
		<tr>
			<td><div data-dojo-type="agile.TransformEditor" class="xeditor"></div></td>
		</tr>  
	</table>
	[/#assign]
	 ,templateString:"${templateString?js_string}"
});	   

agile.singoton("agile.PseudoMetadata",agile.XStyleMetadata,{
	editorClass:"agile.PseudoEditor"
	,label:agile.i18n('Pseudo',null,true)
	,name:"style.pseudo"		
	[#assign templateString]<div><div data-dojo-type="agile.PseudoEditor" class="xeditor"></div></div>[/#assign]
	,templateString:"${templateString?js_string}"
});

agile.singoton("agile.TextStyleMetadata",agile.XStyleMetadata,{
	editorClass:"agile.TextStyleEditor"
	,label:agile.i18n('Text',null,true)
	,name:"style.text"		
    [#assign templateString]<div><div data-dojo-type="agile.TextStyleEditor" class="xeditor"></div></div>[/#assign]
	,templateString:"${templateString?js_string}"	
});

agile.singoton("agile.BackgroundMetadata",agile.XStyleMetadata,{
	editorClass:"agile.BackgroundEditor"
	,label:agile.i18n('Background',null,true)
	,name:"style.background"	
	[#assign templateString]<div><div data-dojo-type="agile.BackgroundEditor" class="xeditor"></div></div>[/#assign]
    ,templateString:"${templateString?js_string}"
});


agile.singoton("agile.BoxMetadata",agile.XStyleMetadata,{
	editorClass:"agile.BoxStyleEditor"
	,label:agile.i18n('General',null,true)
	,name:"style.box"		
	[#assign templateString]<div><div data-dojo-type="agile.BoxStyleEditor" class="xeditor"></div></div>[/#assign]
 	,templateString:"${templateString?js_string}"	
});

agile.singoton("agile.AnimationMetadata",agile.XStyleMetadata,{
	editorClass:"agile.AnimationEditor"
	,label:agile.i18n('Animation',null,true)
	,name:"style.animation"	
	[#assign templateString]<div><div data-dojo-type="agile.AnimationEditor" class="xeditor"></div></div>[/#assign]
	,templateString:"${templateString?js_string}"
});
[#--
agile.singoton("agile.ThemeMetadata",agile.XStyleMetadata,{
	editorClass:"agile.ThemeMetadata"
	,label:agile.i18n('Theme',null,true)
	,name:"style.theme"	
	[#assign templateString]<div><div data-dojo-type="agile.ThemeEditor" class="xeditor"></div></div>[/#assign]
	,templateString:"${templateString?js_string}"
});	
--]
[/@]